﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@using AngelCMS.module.Models;
<link href="~/Content/css/fileinput.css" rel="stylesheet" />
<style>
    .redspan {
        color: red;
        margin-right: 5px;
    }

    .isfinal {
        line-height: 35px;
    }

    .isfinalcolor {
        color: #33cabb;
    }

    .borderbot {
        border-bottom: 1px solid rgba(77,82,89,0.05);
    }
    /*.form-control-feedback {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        pointer-events: none;
    }*/
    .krajee-default .file-footer-caption {
        display: none;
    }

    .krajee-default.file-preview-frame .file-thumbnail-footer {
        height: 0px;
    }
    .bb {
        margin-left:20px;
    }
</style>
<!--时间选择插件-->
<script src="~/Content/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="~/Content/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="~/Content/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="~/Content/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="~/Content/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="~/Content/js/main.min.js"></script>
<script src="~/Content/js/jquery.form.js"></script>
<!--文件上传-->
<script src="~/Content/js/bootstrap-fileinput/fileinput.js"></script>
<script src="~/Content/js/bootstrap-fileinput/locales/zh.js"></script>
  <!--页面主要内容-->
<main class="lyear-layout-content">
   
    <div class="container-fluid">

        <div class="card">
            <div class="card-header"><h4>添加比赛</h4></div>
            <div class="card-body  borderbot">
                @{ Match m = ViewBag.Match;
                <form class="form-horizontal" id="form1" method="post">
                    <div class="form-group">
                        <label class="col-md-3 control-label " for="MatchQuarter">@*<span class="redspan">*@比赛季度</label>
                        <div class="col-md-7">
                            <input class="form-control js-datepicker m-b-10 " type="text" id="MatchQuarter" name="MatchQuarter" placeholder="yyyy-mm" value="@m.MatchQuarter" data-date-format="yyyy-mm" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="matchName"><span class="redspan">*</span>比赛名称</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="matchName" name="matchName" placeholder="比赛名称" value="@m.MatchName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="matchName"><span class="redspan"></span>设置为当前查询的比赛</label>
                        @if (m.iscurent == 1)
                        {
                            <label class="lyear-radio radio-inline radio-primary bb">
                                <input type="radio" name="iscurent" checked="checked"><span>是</span>
                            </label>

                            <label class="lyear-radio radio-inline radio-primary ">
                                <input type="radio" name="iscurent"><span>否</span>
                            </label>
                        }
                        else
                        {
                            <label class="lyear-radio radio-inline radio-primary bb">
                                <input type="radio" name="iscurent" ><span>是</span>
                            </label>

                            <label class="lyear-radio radio-inline radio-primary ">
                                <input type="radio" name="iscurent" checked="checked"><span>否</span>
                            </label>
                        }
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="MatchArea"><span class="redspan">*</span>赛区</label>
                        <div class="col-md-7">
                            @*<input class="form-control" type="text" value="@m.MatchArea" id="MatchArea" name="MatchArea" placeholder="请输入赛区">*@
                            <select class="form-control" id="MatchArea" name="MatchArea" size="1">
                                <option value="0">请选择</option>
                                <option value="1">选项 #1</option>
                                <option value="2">选项 #2</option>
                                <option value="3">选项 #3</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group hidden">
                        <label class="col-md-3 control-label" for="IsFinalMatch"><span class="redspan">*</span>比赛是否为决赛</label>
                        <div class="col-md-7  isfinal">

                            <label class="isfinalcolor">非决赛</label>
                            <label class="lyear-switch switch-light">
                                @if (m.IsFinalMatch == 0)
                                {
                                    <input name="FinalMatchN" id="FinalMatchN" type="checkbox">}
                                else
                                {
                                    <input name="FinalMatchY" id="FinalMatchY" type="checkbox" checked="checked">
                                }
                                <span></span>
                            </label>
                            <label>决赛</label>


                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="MatchFee">@*<span class="redspan">*</span>*@报名费用</label>
                        <div class="col-md-7">
                            <input class="form-control" value="@m.MatchFee" type="number" id="MatchFee" maxlength="10" name="MatchFee" placeholder="报名费用">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="MatchFee">@*<span class="redspan">*</span>*@二维码图片</label>
                        <div class="col-md-7">

                            <div class="file-loading">
                                <input id="Qrcode" name="Qrcode" class="file-loading" type="file" data-theme="zh">
                            </div>
                            <br>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="example-hf-email">@*<span class="redspan">*</span>*@比赛时间</label>
                        <div class="col-md-7">
                            <div class="input-daterange input-group">
                                <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="MatchTimeBegin" name="MatchTimeBegin" value="@m.MatchTimeBegin" placeholder="从">
                                <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="MatchTimeEnd" value="@m.MatchTimeEnd" name="MatchTimeEnd" placeholder="至">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="example-hf-email">@*<span class="redspan">*</span>*@报名时间</label>
                        <div class="col-md-7">
                            <div class="input-daterange input-group">
                                <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="EntryTimeBegin" value="@m.EntryTimeBegin" name="EntryTimeBegin" placeholder="从">
                                <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                <input class="form-control js-datepicker" data-date-format="yyyy-mm-dd" type="text" id="EntryTimeEnd" value="@m.EntryTimeEnd" name="EntryTimeEnd" placeholder="至">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" id="ID" value="@ViewBag.ID" name="ID" />
                        <input type="hidden" id="qrcodeUrl" value="@m.QrCode" name="qrcodeUrl" />
                        <div class="col-md-9 col-md-offset-3">
                            <button class="btn btn-primary" onclick="Edit()" type="submit">确定</button>
                        </div>
                    </div>
                </form>
                }


            </div>
            @{ 
                if (ViewBag.ID != "0")
                {
            <div class="card-header">                
                <div class="form-group">
                    @*<form enctype="multipart/form-data" class="form-horizontal">*@
                        <label class="col-md-3 control-label" for="MatchFee">导入获奖人员excel</label>
                        <div class="col-md-7">
                            <div class="file-loading">
                                <input id="txt_file" class="file-loading" type="file" data-show-preview="false" data-theme="zh">
                            </div>
                        </div>
                        <br />
                    @*</form>*@
                    <br />
                </div>
            </div>}
            }
        </div>
    </div>

</main>
<!--End 页面主要内容-->
<script type="text/javascript">
    var domain = window.location.host;
    $(function () {
        //0.初始化fileinput
        var url = "";
        var arr;
        var captionarr;
        qrcodeUrl=$("#qrcodeUrl").val();
        if (qrcodeUrl != null && qrcodeUrl != "") {           
            url = "http://" + domain + "/QrCode/" + qrcodeUrl;
            arr = new Array('<img class="file-preview-image kv-preview-data" src="' + url + '">');
            var key = $("#ID").val();
            captionarr = new Array({ caption: qrcodeUrl, width: "120px", url: "deletePic", key:key});
        }
        var oFileInput = new FileInput();
        oFileInput.Init("txt_file", "/File/ImportUser",true,"","");
        oFileInput.Init("Qrcode", "/File/ImportQrcode", false, arr, captionarr);
        //ValidDatePicker("MatchQuarter");
        //ValidDatePicker("MatchTimeBegin");
        //ValidDatePicker("MatchTimeEnd");
        //ValidDatePicker("EntryTimeBegin");
        //ValidDatePicker("EntryTimeEnd");

        GetSelectList();

       
       
    });
    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控件（第一次初始化）
        oFile.Init = function (ctrlName, uploadUrl, showUpload, url, captionarr) {
            var control = $('#' + ctrlName);

            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['xls','xlsx','jpg','png'],//接收的文件后缀
                showUpload: showUpload, //是否显示上传按钮
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式     
                dropZoneEnabled: false,//是否显示拖拽区域
                overwriteInitial: false,
                autoReplace: true,
                //browseClass: "btn btn-primary btn-lg",
                //fileType: "any",
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                initialPreview: url,
                initialPreviewConfig: captionarr,
                layoutTemplates: {
                    //actionDelete:'', //去除上传预览的缩略图中的删除图标
                    actionUpload: '',//去除上传预览缩略图中的上传图片；
                    //actionZoom: ''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                uploadExtraData: function () {
                    //注意这里，传参是json格式,后台直接使用对象属性接收，比如employeeCode，我在RatingQuery 里面直接定义了employeeCode属性，然后最重要的也是
                    //最容易忽略的，传递多个参数时，不要忘记里面大括号{}后面的分号，这里可以直接return {a:b}; 或者{a:b}都可以，但必须要有大括号包裹
                    return {
                        ID: $("#ID").val(),
                        AreaID:$("#MatchArea").val()
                    };
                }
            });


            $('#txt_file').on('fileerror', function (event, data, msg) {
                alert(123);

            });
            //导入文件上传完成之后的事件
            $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
                var data = data.response;
                debugger;
                if (data.status == 0) {
                    lightyear.notify(data.msg, 'warning', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }
                else {
                    lightyear.notify(data.msg, 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }
               

               
                //if (data == undefined) {
                //    toastr.error('文件格式类型不正确');
                //    return;
                //}
                //1.初始化表格
                //var oTable = new TableInit();
                //oTable.Init(data);
                //$("#div_startimport").show();
            });
        }
        return oFile;
    };
        
    function Edit() {


        var options = {
            url: "/admin/AddMatch",
            type:"post",
            success: function (data) {
                if (data == "1") {
                    lightyear.notify('操作成功~', 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    if ($("#ID").val() == 0) {
                        window.location.href = "/admin/Index";
                    }
                   
                }               
                return false
            }
        };

        $('#form1').bootstrapValidator({
            live: 'disabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
            // disabled和submitted代表当点击提交按钮时触发验证

            feedbackIcons: {  //显示表单验证结果的图标
                //valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                //validating: 'glyphicon glyphicon-refresh' // 此框架从写了样式导致X没有在框中，主要是.form-control-feedback 样式
            },
            fields: {
                //MatchQuarter: {
                //    validators: {
                //        notEmpty: {
                //            message: '比赛季度不能为空'
                //        }
                //    }
                //},
                matchName: {
                    validators: {
                        notEmpty: {
                            message: '比赛名称不能为空'
                        }
                    }
                },
                 MatchArea: {
                    validators: {
                        notEmpty: {
                            message: '赛区不能为空'
                        }
                    }
                }           
                //,
                //    MatchTimeBegin: {
                //    validators: {
                //        notEmpty: {
                //            message: '比赛开始时间不能为空'
                //        }
                //    }
                //}
                //,
                //MatchTimeEnd: {
                //    validators: {
                //        notEmpty: {
                //            message: '比赛结束时间不能为空'
                //        }
                //    }
                //}

                //,
                //EntryTimeBegin: {
                //    validators: {
                //        notEmpty: {
                //            message: '报名开始时间不能为空'
                //        }
                //    }
                //}
                //,
                //EntryTimeBegin: {
                //    validators: {
                //        notEmpty: {
                //            message: '报名结束时间不能为空'
                //        }
                //    }
                //}
              
            }
        })

        $("#form1").ajaxForm(options);
        }

    
    //function ValidDatePicker(id) {
    //    $("#"+id).datepicker({
    //        todayBtn: "linked",
    //        autoclose: true,
    //        language: 'zh-CN',
    //        todayHighlight: true,
    //        endDate: new Date()
    //    }).on('hide', function (e) {
    //        $('#form1').data('bootstrapValidator')
    //            .updateStatus(id, 'NOT_VALIDATED', null)
    //            .validateField(id);
    //    });
    //}
    


    function GetSelectList() {
        
        $.ajax({
            url: "/Area/GeSelectList",
            dataType: "json",
            success: function (data) {
                if (data != null) {                   
                    if (data != null && data.length > 0) {
                        var strHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var val = data[i].AreaName;
                            strHtml = strHtml + ' <option value=' + data[i].ID + '>' + val + '</option>';
                        }
                        $("#MatchArea").html("");

                        $("#MatchArea").html(strHtml);
                    }

                }
            }
        })
    }
</script>